<template>
    <div class="order-detail">
        <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="onClickLeft" />

        <!-- <viewOrderTemplate :dataResouce="details" :pageDataList="defaultLabelList"></viewOrderTemplate> -->

        <van-collapse v-model="activeNames" :accordion="true">
			<van-collapse-item name="1">
				<template slot="title">
					订单信息
				</template>
				<template slot="value">
					查看详情
				</template>
				<template slot="default">
                    <viewOrderTemplate :dataResouce="dataResouce" :pageDataList="defaultLabelList"></viewOrderTemplate>
				</template>
			</van-collapse-item>
		</van-collapse>

        <van-button style="width: 100%;" size="small" type="primary" @click="orders()" :disabled="disabled">接单</van-button>
    </div>
</template>

<script>
import { downLoadFiles } from '~/util/downLoad'
import viewOrderTemplate from '~/components/_viewOrder'
import { getCurrentOrderList } from '~/api/commonApi'
import { Toast, Dialog } from 'vant'

export default {
    data() {
        return {
            activeNames: '1',
            details: [],
            images: [],
            files: '',
            disabled: false,
            dataResouce: [],
            defaultLabelList: ['订单编号', '订单状态', '专利名称', '专利类型', '联络人邮箱', '联络人电话', '技术领域', '技术背景', '技术问题', '技术方案', '项目优势', '具体实施方式', '附图', '附件']
        }
    },
    //缓存也会走的钩子
    deactivated(){
        this.$destroy(true);//销毁组件
    },
    activated() {
        this.getCurrentOrderList()
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        getCurrentOrderList() {
            this.disabled = false
            let id = this.$route.params.id
            getCurrentOrderList(this.$axios, id).then(res => {
                if(res.status === 200) {
                    this.details = res.data.data
                    this.dataResouce = [
                        { label: '订单编号', value: this.details.order_number },
                        { label: '订单状态', value: this.details.status },
                        { label: '专利名称', value: this.details.patent_name },
                        { label: '专利类型', value: this.details.type },
                        { label: '联络人邮箱', value: this.details.liaisons_email },
                        { label: '联络人电话', value: this.details.liaisons_tel },
                        { label: '技术领域', value: this.details.territory },
                        { label: '技术背景', value: this.details.background },
                        { label: '技术问题', value: this.details.problem },
                        { label: '技术方案', value: this.details.plan },
                        { label: '项目优势', value: this.details.advantage },
                        { label: '具体实施方式', value: this.details.way },
                        { label: '附图', value: this.details.img },
                        { label: '附件', value: this.details.file }
                    ]
                }
            })
        },
        orders() {
            this.getCurrentOrderList()
            
            console.log(this.details.status, 'this.details.status')
            if(this.details.status !== '未接单') {
                Toast('订单已被接单')
                return
            }

            Dialog.confirm({
                title: '消息',
                message: '确认接单吗'
            }).then(() => {
                this.$axios.put(`/api/order/${this.details.id}/agent/${this.$store.state.user.id}`).then(res => {
                    if(res.status === 200) {
                        Toast('接单成功')
                        this.getCurrentOrderList()
                        this.disabled = true
                    }else{
                        Toast('接单失败')
                    }
                })
            }).catch(() => {
                Dialog.close
            })
            
        }
    },
    components: {
        viewOrderTemplate
    }
}
</script>

<style lang="less" scoped>
    .order-detail{
        /deep/ .van-collapse-item__content{
			padding: 0;
		}

		/deep/ .van-cell__right-icon{
			display: none;
		}
    }
</style>